<template>
  <div class="weather-icons-demo">
    <h1>和风天气图标示例</h1>
    
    <section>
      <h2>基本图标</h2>
      <div class="icon-grid">
        <div v-for="code in basicCodes" :key="code" class="icon-item">
          <WeatherIcon :code="code" :size="64" :show-text="true" />
          <div class="icon-code">{{ code }}</div>
        </div>
      </div>
    </section>
    
    <section>
      <h2>白天/夜间对比</h2>
      <div class="day-night-container">
        <div v-for="pair in dayNightPairs" :key="pair.day" class="day-night-pair">
          <div class="day-icon">
            <WeatherIcon :code="pair.day" :size="64" :show-text="true" />
            <div class="icon-code">{{ pair.day }} (白天)</div>
          </div>
          <div class="night-icon">
            <WeatherIcon :code="pair.night" :size="64" :show-text="true" />
            <div class="icon-code">{{ pair.night }} (夜间)</div>
          </div>
        </div>
      </div>
    </section>
    
    <section>
      <h2>天气状况映射</h2>
      <div class="condition-grid">
        <div v-for="(condition, index) in conditions" :key="index" class="condition-item">
          <div class="condition-label">{{ condition }}</div>
          <div class="condition-icons">
            <WeatherIcon :condition="condition" :is-night="false" :size="48" :show-text="true" />
            <WeatherIcon :condition="condition" :is-night="true" :size="48" :show-text="true" />
          </div>
        </div>
      </div>
    </section>
    
    <section>
      <h2>图标尺寸</h2>
      <div class="size-container">
        <div v-for="size in sizes" :key="size" class="size-item">
          <WeatherIcon code="100" :size="size" />
          <div class="size-label">{{ size }}px</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import WeatherIcon from '../components/WeatherIcon.vue';

export default {
  name: 'WeatherIconsDemo',
  components: {
    WeatherIcon
  },
  data() {
    return {
      // 基本图标代码
      basicCodes: ['100', '101', '104', '300', '302', '305', '306', '307', '400', '401', '499', '501'],
      
      // 白天/夜间成对图标
      dayNightPairs: [
        { day: '100', night: '150' },  // 晴
        { day: '101', night: '151' },  // 多云
        { day: '102', night: '152' },  // 少云
        { day: '103', night: '153' },  // 晴间多云
        { day: '300', night: '350' },  // 阵雨
        { day: '301', night: '351' },  // 强阵雨
      ],
      
      // 天气状况文本
      conditions: ['晴', '多云', '阴', '小雨', '中雨', '大雨', '暴雨', '雷阵雨', '小雪', '中雪', '大雪', '雾', '霾'],
      
      // 图标尺寸
      sizes: [16, 32, 64, 128]
    };
  }
};
</script>

<style scoped>
.weather-icons-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
}

h2 {
  font-size: 22px;
  margin: 30px 0 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

section {
  margin-bottom: 40px;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
  transition: transform 0.3s;
}

.icon-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.icon-code {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.day-night-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.day-night-pair {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
}

.day-icon, .night-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.day-icon {
  background-color: rgba(255, 235, 205, 0.3);
  border-radius: 8px;
}

.night-icon {
  background-color: rgba(176, 196, 222, 0.3);
  border-radius: 8px;
}

.condition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.condition-item {
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
  text-align: center;
}

.condition-label {
  font-weight: bold;
  margin-bottom: 10px;
}

.condition-icons {
  display: flex;
  justify-content: space-around;
}

.size-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
}

.size-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.size-label {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
</style> 